<template>
  <!--  卡业务-卡业务明细 -->
  <div class="card_business_details">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="部门:" label-width="40px">
        <el-select
          v-model="departmentGuid"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in departmentoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名:" label-width="40px">
        <el-input v-model="userName" placeholder="姓名" size="mini" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
        ></el-time-picker>
      </el-form-item>
      <!-- 发卡明细报表显示 -->
      <!-- <el-form-item label="发卡类型:" label-width="70px" v-if="activeName == 'second'">
        <el-select v-model="regType" placeholder="请选择" size="mini" clearable style="width: 120px">
          <el-option
            v-for="item in regTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <!-- 充值明细报表显示 -->
      <el-form-item label="充值方式:" label-width="70px" v-if="activeName == 'five'">
        <el-select
          v-model="rechargeMode"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in fiveOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 减款明细报表显示 -->
      <el-form-item label="减款方式:" label-width="70px" v-if="activeName == 'six'">
        <el-select
          v-model="chargingType"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in sixOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--  充值明细报表/减款明细报表显示-->
      <el-form-item label="领取情况:" v-if="activeName == 'six' || activeName == 'five'">
        <el-select
          v-model="adjustState"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="钱包:" prop="walletNo">
        <el-select
          v-model="waterWalletNo"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in paylist"
            :key="item.walletNo"
            :label="item.walletName"
            :value="item.walletNo"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 自定义表头 -->
    <!-- <el-form :inline="true" :model="elform" class="demo-form-inline1">
        <el-form-item class="searchmarigin">
          <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
        </el-form-item>
        <el-form-item >
            <el-popover
             width="500"
             placement="top"
             trigger="click"
            >
               <el-row>
                 <el-checkbox style="width:20%" :label="formThead.cardNumber.label" v-model="formThead.cardNumber.checked" @change="checkboxChanged()"></el-checkbox>
                 <el-checkbox style="width:20%" :label="formThead.userName.label" v-model="formThead.userName.checked" @change="checkboxChanged()" ></el-checkbox>
                 <el-checkbox style="width:20%" :label="formThead.departmentName.label" v-model="formThead.departmentName.checked" @change="checkboxChanged()"></el-checkbox>
               </el-row>
               <el-row>
                 <el-checkbox style="width:20%" :label="formThead.oldBalance.label" v-model="formThead.oldBalance.checked" @change="checkboxChanged()"></el-checkbox>
                 <el-checkbox style="width:20%" :label="formThead.newBalance.label" v-model="formThead.newBalance.checked" @change="checkboxChanged()"></el-checkbox>
                 <el-checkbox style="width:20%" :label="formThead.syncTime.label" v-model="formThead.syncTime.checked" @change="checkboxChanged()"></el-checkbox>
               </el-row> 
              <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
            </el-popover>
        </el-form-item>             
    </el-form>-->
    <!-- 条件 -->
    <sync-card-details-customize-header
      v-if="synccarddetailsheaderVisible"
      ref="synccardheader"
      :userName="userName"
      :departmentGuid="departmentGuid"
      :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
      :unitGuid="changeschoolid"
      @refreshDataList="getarea"
      @exporotDataList="exportlist"
      @printList="printlist"
    ></sync-card-details-customize-header>
    <div class="tabs_main">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="发卡明细报表" name="second">
          <!-- 发卡明细报表 -->
          <card-issuance-details
            v-if="cardissuancedetailsVisible"
            ref="cardissuancelist"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :regType="regType"
          ></card-issuance-details>
        </el-tab-pane>
        <el-tab-pane label="补卡明细报表" name="third">
          <!-- 补卡明细报表 -->
          <supplement-card-details
            v-if="supplementcardVisible"
            ref="supplementcardlist"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :waterWalletNo="waterWalletNo"
          ></supplement-card-details>
        </el-tab-pane>
        <el-tab-pane label="退卡明细报表" name="four">
          <!-- 退卡明细报表 -->
          <check-out-details
            v-if="checkoutcardVisible"
            ref="checkoutcardlist"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :waterWalletNo="waterWalletNo"
          ></check-out-details>
        </el-tab-pane>
        <el-tab-pane label="充值明细报表" name="five">
          <!-- 充值明细报表 -->
          <recharge-details
            v-if="rechargedetailsVisible"
            ref="rechargedetailst"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :rechargeMode="rechargeMode"
            :adjustState="adjustState"
            :waterWalletNo="waterWalletNo"
          ></recharge-details>
        </el-tab-pane>
        <el-tab-pane label="减款明细报表" name="six">
          <!-- 减款明细报表 -->
          <deduction-details
            v-if="deductiondetailsVisible"
            ref="deductiondetailslsit"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :chargingType="chargingType"
            :adjustState="adjustState"
            :waterWalletNo="waterWalletNo"
          ></deduction-details>
        </el-tab-pane>
        <el-tab-pane label="同步卡明细表" name="first">
          <!-- 同步卡明细表 -->
          <sync-card-details
            v-if="syncarddetailsVisible"
            ref="syncardetails"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :waterWalletNo="waterWalletNo"
          ></sync-card-details>
        </el-tab-pane>
        <el-tab-pane label="消费修正明细表" name="seven">
          <!-- 消费明细修正 -->
          <consumption-revision-details
            v-if="consumptionrevisionVisible"
            ref="consumptionrevisionlist"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :waterWalletNo="waterWalletNo"
          ></consumption-revision-details>
        </el-tab-pane>
        <!-- 圈存明细表 -->
        <el-tab-pane label="圈存明细表" name="eight">
          <consumption-circling-details
            v-if="consumptioncirclingVisible"
            ref="consumptioncirclinglist"
            :userName="userName"
            :departmentGuid="departmentGuid"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :waterWalletNo="waterWalletNo"
          ></consumption-circling-details>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import SyncCardDetails from './sync-card-details'
import CardIssuanceDetails from './card-issuance-details'
import SupplementCardDetails from './supplement-card-details'
import CheckOutDetails from './check-out-details'
import SyncCardDetailsCustomizeHeader from './sync-card-details-customize-header'
import RechargeDetails from './recharge-details'
import DeductionDetails from './deduction-details'
import ConsumptionRevisionDetails from './consumption-revision-details'
import ConsumptionCirclingDetails from './consumption-circling-details'
export default {
  data() {
    return {
      syncarddetailsVisible: false,
      synccarddetailsheaderVisible: false,
      cardissuancedetailsVisible: false,
      supplementcardVisible: false,
      checkoutcardVisible: false,
      rechargedetailsVisible: false,
      deductiondetailsVisible: false,
      consumptionrevisionVisible: false,
      consumptioncirclingVisible: false,
      elform: {},
      departmentoptions: [],
      departmentGuid: '',
      datetime: '',
      time: '',
      userName: '',
      detailslist: [],
      searchInfo: {},
      activeName: '',
      regType: '',
      regTypeOptions: [
        { value: 0, label: '正常' },
        { value: 5, label: '补挂' },
        { value: 6, label: '补坏' }
      ],
      // 充值方式
      rechargeMode: '',
      fiveOptions: [
        { value: 0, label: '卡务中心充值' },
        { value: 10, label: '发卡预存款' },
        { value: 3, label: '充值机充值' },
        { value: 1, label: '平台无卡充值' },
        { value: 2, label: '支付宝充值' },
        { value: 6, label: '微信充值' },
        { value: 5, label: '第三方充值' }
      ],
      // 减款方式
      chargingType: '',
      sixOptions: [
        { value: 2, label: '卡务中心减款' },
        { value: 18, label: '平台无卡减款' }
      ],
      adjustState: '',
      // 是否领取
      options: [
        {
          value: 0,
          label: '未领取'
        },
        {
          value: 1,
          label: '已领取'
        },
        {
          value: 2,
          label: '领取失败'
        }
      ],
      // formThead: {
      //     cardNumber: {label: '卡号',prop: 'cardNumber',checked:true},
      //     userName: {label: '姓名',prop: 'userName',checked:true},
      //     departmentName: {label: '部门',prop: 'departmentName',checked:true},
      //     oldBalance: {label: '原主钱包金额',prop: 'oldBalance',checked:true},
      //     newBalance: {label: '同步后主钱包金额',prop: 'newBalance',checked:true},
      //     syncTime: {label: '操作时间',prop: 'syncTime',checked:true},
      // },
      // 钱包
      paylist: [],
      waterWalletNo: ''
    }
  },
  components: {
    SyncCardDetails,
    SyncCardDetailsCustomizeHeader,
    CardIssuanceDetails,
    SupplementCardDetails,
    CheckOutDetails,
    RechargeDetails,
    DeductionDetails,
    ConsumptionRevisionDetails,
    ConsumptionCirclingDetails
  },
  created() {
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
  },
  mounted() {
    this.departmentselectlist()
    this.handleClick()
    this.activeName = 'second'
    this.handleClick()
    // 获取钱包
    this.getPayNumber()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    //部门选择
    departmentselectlist() {
      this.departmentoptions = []
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent == null ? [] : data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentoptions.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 获取钱包
    getPayNumber() {
      this.paylist = []
      this.$http({
        url: this.$http.adornUrl('/unit/unit-wallet-info-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          data.messageContent.map(item => {
            let walletType = item.walletType
            // 所有的钱包
            if (walletType != 1) {
              this.paylist.push(item)
            }
          })
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },

    checkboxChanged() {},
    onSubmit() {},
    onExport() {},
    handleClick() {
      if (this.activeName == 'first') {
        this.syncarddetailsVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
        this.$nextTick(() => {
          this.$refs.syncardetails.getreportsynciniit(this.searchInfo)
        })
      }
      if (this.activeName == 'second') {
        this.cardissuancedetailsVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'third') {
        this.supplementcardVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'four') {
        this.checkoutcardVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'five') {
        this.rechargedetailsVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'six') {
        this.deductiondetailsVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'seven') {
        this.consumptionrevisionVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
      if (this.activeName == 'eight') {
        this.consumptioncirclingVisible = true
        this.synccarddetailsheaderVisible = true
        this.$nextTick(() => {
          this.$refs.synccardheader.firstinit(this.activeName)
        })
      }
    },
    getarea(activeName) {
      if (this.activeName == 'first') {
        this.syncarddetailsVisible = true
        this.$nextTick(() => {
          this.$refs.syncardetails.getsearchInfodata()
        })
      }
      if (this.activeName == 'second') {
        this.cardissuancedetailsVisible = true
        this.$nextTick(() => {
          this.$refs.cardissuancelist.getcardissuinginit()
        })
      }
      if (this.activeName == 'third') {
        this.supplementcardVisible = true
        this.$nextTick(() => {
          this.$refs.supplementcardlist.getsupplemnetcardinit()
        })
      }
      if (this.activeName == 'four') {
        this.checkoutcardVisible = true
        this.$nextTick(() => {
          this.$refs.checkoutcardlist.getcheckoutinit()
        })
      }
      if (this.activeName == 'five') {
        this.rechargedetailsVisible = true
        this.$nextTick(() => {
          this.$refs.rechargedetailst.getrechargedetailinit()
        })
      }
      if (this.activeName == 'six') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.deductiondetailslsit.getrechargedetailinit()
        })
      }
      if (this.activeName == 'seven') {
        this.consumptionrevisionVisible = true
        this.$nextTick(() => {
          this.$refs.consumptionrevisionlist.getrechargedetailinit()
        })
      }
      // 圈存明细表
      if (this.activeName == 'eight') {
        this.consumptioncirclingVisible = true
        this.$nextTick(() => {
          this.$refs.consumptioncirclinglist.getrechargedetailinit()
        })
      }
    },
    // 导出
    exportlist(activeName) {
      if (this.activeName == 'first') {
        this.syncarddetailsVisible = true
        this.$nextTick(() => {
          this.$refs.syncardetails.exportlist()
        })
      }
      if (this.activeName == 'second') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.cardissuancelist.exportlist()
        })
      }
      if (this.activeName == 'third') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.supplementcardlist.exportlist()
        })
      }
      if (this.activeName == 'four') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.checkoutcardlist.exportlist()
        })
      }
      if (this.activeName == 'five') {
        this.rechargedetailsVisible = true
        this.$nextTick(() => {
          this.$refs.rechargedetailst.exportlist()
        })
      }
      if (this.activeName == 'six') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.deductiondetailslsit.exportlist()
        })
      }
      if (this.activeName == 'seven') {
        this.consumptionrevisionVisible = true
        this.$nextTick(() => {
          this.$refs.consumptionrevisionlist.exportlist()
        })
      }
      // 圈存明细表
      if (this.activeName == 'eight') {
        this.consumptioncirclingVisible = true
        this.$nextTick(() => {
          this.$refs.consumptioncirclinglist.exportlist()
        })
      }
    },
    // 打印
    printlist(activeName) {
      // 同步卡明细表
      if (this.activeName == 'first') {
        this.syncarddetailsVisible = true
        this.$nextTick(() => {
          this.$refs.syncardetails.exportlist('print')
        })
      }
      // 发卡明细报表
      if (this.activeName == 'second') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.cardissuancelist.exportlist('print')
        })
      }
      // 补卡明细报表
      if (this.activeName == 'third') {
        this.supplementcardVisible = true
        this.$nextTick(() => {
          this.$refs.supplementcardlist.exportlist('print')
        })
      }
      // 退卡明细表
      if (this.activeName == 'four') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.checkoutcardlist.exportlist('print')
        })
      }
      // 充值卡明细
      if (this.activeName == 'five') {
        this.rechargedetailsVisible = true
        this.$nextTick(() => {
          this.$refs.rechargedetailst.exportlist('print')
        })
      }
      // <!-- 减款明细报表 -->
      if (this.activeName == 'six') {
        this.deductiondetailsVisible = true
        this.$nextTick(() => {
          this.$refs.deductiondetailslsit.exportlist('print')
        })
      }
      // 消费修正明细表
      if (this.activeName == 'seven') {
        this.consumptionrevisionVisible = true
        this.$nextTick(() => {
          this.$refs.consumptionrevisionlist.exportlist('print')
        })
      }
      // 圈存明细表
      if (this.activeName == 'eight') {
        this.consumptioncirclingVisible = true
        this.$nextTick(() => {
          this.$refs.consumptioncirclinglist.exportlist('print')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.card_business_details {
  padding: 10px;
  .demo-form-inline,
  .demo-form-inline1 {
    // height: 40px;
    // width: 1234px;
    // display: flex;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .tabs_main {
    // padding-top: 20px;
    .page {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>